<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://unpkg.com/axios"></script>
</head>
<body>
    <h1>看我</h1>
    <hr>
<script>
    /*
    响应头：Content-Type: application/json;charset=UTF-8
    响应数据：{"code":200,"method":"GET","data":{"id":0,"name":null},"ip":"0:0:0:0:0:0:0:1"}
    */
    axios.get('/api/show?id=123&name=李青')
        .then(res=>{
            console.log(res.data)
        })
        .catch(err=>{
            console.log(err)
        })
</script>



<script>

    // /*
    // content-type: text/html
    // 查询字符串参数：
    // id: 123
    // name: 张三
    // */
    // function get1() {
    //     //get Content-Type: text/html; charset=utf-8
    //     fetch("/api/show?id=3&name=李四").then(res => res.text()).then(res => {
    //         console.log("获取服务器输出的值...........................")
    //         console.log(res)
    //     }).catch(err => {
    //         console.log("catch...........................")
    //         console.log(err)
    //     })
    // }
    //
    //
    // /*
    // 异常：TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.
    // 使用 GET/HEAD 方法的请求不能有正文(body)
    // */
    // function get2() {
    //     let id = 12312;
    //     let name = "站撒";
    //     fetch("/clock",{method:"GET",body:JSON.stringify({id, name})})
    //         .then(res => res.json())
    //         .then(res => { console.log(res)})
    //         .catch(err => {console.log(err)})
    // }
    //
    // /*
    // Content-Type: text/plain;charset=UTF-8
    // 请求负载
    // {id: 12312, name: "站撒"}
    // id: 12312
    // name: "站撒"
    // */
    // function post1() {
    //     let id = 12312;
    //     let name = "站撒";
    //     fetch("/clock",{method:"POST",body:JSON.stringify({id, name})})
    //         .then(res => res.json())
    //         .then(res => { console.log(res)})
    //         .catch(err => {console.log(err)})
    // }
    //
    //
    // /*
    // Content-type: application/json;charset=urf-8
    // 请求负载
    // {id: 12312, name: "站撒"}
    // id: 12312
    // name: "站撒"
    // */
    // function post() {
    //     //post Content-Type: text/plain;charset=UTF-8
    //     let id = 663
    //     let name = '张三丰3'
    //     fetch("/api/show", {method: 'post', headers: {'content-type': 'application/json;charset=utf-8'}, body: JSON.stringify({id, name})}).then(res => res.json()).then(res => {
    //         console.log("获取服务器输出的值...........................")
    //         console.log(res)
    //     }).catch(err => {
    //         console.log("catch...........................")
    //         console.log(err)
    //     })
    // }
    //
    // /*
    //    Content-type: application/x-www-form-urlencoded
    //    表单数据
    //    {"id":12312,"name":"站撒"}:
    // */
    // function post3() {
    //     //post application/x-www-form-urlencoded
    //     let id = 66
    //     let name = '张三丰'
    //     fetch("/api/show", {
    //         method: 'post',
    //         headers: {'content-type': 'application/x-www-form-urlencoded'},
    //         body: `id=${id}&name=${name}`
    //     }).then(res => res.json()).then(res => {
    //         console.log("获取服务器输出的值...........................")
    //         console.log(res)
    //     }).catch(err => {
    //         console.log("catch...........................")
    //         console.log(err)
    //     })
    // }


</script>
</body>
</html>
